<script lang="ts" setup>
import { defineProps } from 'vue'
import { timeAbbreviation } from '@/utils/time'

import type { BiliUser } from '@/TypingMore/SearchTyping'

import NofindView from '@/components/NofindView.vue'
import { useRouter } from 'vue-router';

const props = defineProps<{
    biliUser: Array<BiliUser> | undefined
}>()

const router = useRouter()

const goToUser = (uid: number) => {
    router.push(`/user/${uid}`)
}

</script>

<template>
    <div v-if="(biliUser && biliUser.length > 0)">
        <div>
            <div class=" flex p-3 bg-white" v-for="b in biliUser" :key="b.room_id" @click="goToUser(b.mid)">
                <div class=" relative w-16 h-16 rounded-full">
                    <img :src="b.upic + '@120w_120h_1c.webp'" alt="" class=" max-w-none w-full rounded-full">
                    <img src="@/assets/icon_Certification_official.png" alt=""
                        class=" absolute bottom-0 right-0  w-4 h-4">
                </div>
                <div class=" flex-1 ml-3 overflow-hidden">
                    <h2 class=" text-sm whitespace-normal">{{ b.uname }}</h2>
                    <p class=" text-xs text-gray-400 overflow-hidden whitespace-nowrap  text-ellipsis"><span>{{ '粉丝:' + timeAbbreviation(b.fans) }}</span><span>{{ '视频' + timeAbbreviation(b.videos)
                    }}</span></p>
                    <p class=" text-xs text-gray-400 overflow-hidden whitespace-nowrap  text-ellipsis">{{ b.usign }}</p>
                </div>
            </div>
        </div>
    </div>
    <NofindView v-else></NofindView>
</template>